<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style>
		li{
			list-style: none;
		}
		.hilight{
			border: 4px solid #ddddd;
		}
	</style>
</head>
<body>
	<ul id="hi">
		<li>
			<ul>
				<li>小明</li>
				<li>小刚</li>
				<li>小亮</li>
			</ul>
		</li>
		<li>hi各位</li>
		<li>helloworld</li>
	</ul>
	<ul class="fn">
		<li>大家好</li>
		<li>hi各位</li>
		<li>helloworld</li>
		<p>大家伙</p>
	</ul>
	<li>你们是</li>
	<ul >
		<li>大家好</li>
		<li>
			<ul class="fn">
				<li>小明</li>
				<li class="fn">小刚</li>
				<li><h1>hh</h1></li>
				<li>小美</li>
			</ul>
			<p name="fuck">大家伙</p>
			<p name="123">大家伙</p>
		</li>
		<li class="fn">小刚</li>
		<li>helloworld</li>

	</ul>
</body>
<script>
	//测试jquery选择器
	
	//1.基本选择器 #id .class tagName *
	// $('#hi').css('border','1px solid red');
	// $('.fn').css('border','1px solid blue');
	// $('li').css('background','#369');
	// $('*').css('width','500');
	
	//2.层级选择器
	// seleter seleter  所有的后代元素
    //     seleter>seleter  所有的子元素
    //     seleter+seleter  紧邻着的下一个元素
    //     seleter~seleter  紧邻着的所有元素
    // $('ul p').css('color','yellow');
    // $('ul>p').css('color','red');
    // $('.fn~li').css('background','blue');
    //  $('.fn+li').css('background','red');
    
    //  3.过滤选择器
     // :first  首个
     //    :last   最后一个
     //    :eq(index)  指定第几个
     //    :gt(index)  索引大于
     //    :lt(index)  索引小于
     //    :odd     索引为奇数的
     //    :even    索引为偶数的 0算偶数
     //    :header  所有的h标签
     //    :not(seleter)  排除
     //        先得到之前的集合,再把not中的内容排除掉
     // $('li:first').css('background','#3e3e3e');
     // $('li:last').css('background','#3e3e3e');
       // $('li:eq(3)').css('background','red');
     // $('li:gt(1)').css('background','blue');
     // $('li:lt(1)').css('background','blue');
     // $('li:odd').css('background','blue');
     // $('li:even').css('background','yellow');
     // $(':header').css('color','red');
      // $('.fn:not(li)').css('color','red');
      // $('li').eq(0).css('border','3px solid black');
      $('li').children().css('border','1px solid yellow');
     $('li').find('p[name=123]').css('color','blue');
</script>
</html>